<template>
  <div class="c-header">

    <ul class="header-ul">
      <li class="header-search">
        <img src="../../assets/icon/microphone.png" >
      </li>

      <li class="search">
        <div class="inp"  @click="goToSearch" >{{header}}</div>
      </li>

      <li class="header-history">
        <img src="../../assets/icon/menu.png" >
      </li>
    </ul>
    <span class="c-header-log"></span>


  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {

    name: 'index',
    data(){
      return{

      }
    },

    methods:{
      goToSearch() {
        this.$router.push({ name: 'search' });
      },
    },
    computed: {
      ...mapState(['header'])
    },
    created(){
      //api 统一管理
      this.$api.getheader()
    }
  }

</script>

<style scoped>
  .c-header{
    position: fixed;
    z-index: 5;
    width: 100vw;
    height: 50px;
    top: 0;
    background: #C74B3E;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
  }
  .header-ul{
    font-size: 0;
    height: 45px;
    margin-top: 5px;
    position: relative;
  }
  .header-ul li{
    display: inline-block;
    padding-left: 15px;
    font-size: 16px;
    color: #71777D;
    height: 40px;
    line-height: 40px;
  }
  .inp{
    width: 100%;
    height: 30px;
    line-height: 30px;
    border-radius: 20px;
    background: #CF6A60;
    text-indent: 80px;
    color: #ffffff;
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  ::-webkit-input-placeholder { /* WebKit browsers */
    color: #E2AAA5;
    font-size: 14px;
  }
 .c-header-log{
   width: 30px;
   height: 30px;
   display: inline-block;
   position: absolute;
   top: 22px;
   left: 105px;
   background: url("../../assets/img/fangdajing.png") no-repeat;
   background-size: 18px;
 }
  .header-ul img{
    width: 20px;
    height: 23px;

  }
  .header-search{
    position: absolute;
    top: 10px;

  }
  .search{
    width: 72%;
    position: absolute;
    top: 10px;
    left: 35px;
  }
  .header-history{
    position: absolute;
    top: 10px;
    right: 18px;
  }


</style>
